<template>
  <div>
    <h2>TsChecked</h2>
    <p @click="change">
      爱好
      <input type="checkbox" data-type="hobby" :checked="value.includes('css')" value="css">CSS
      <input type="checkbox" data-type="hobby" :checked="value.includes('html')" value="html">HTML
      <input type="checkbox" data-type="hobby" :checked="value.includes('js')" value="js">JS
    </p>
  </div>
</template>
<script>
export default {
  props: {
    value: {
      type: Array,
      default: () => [],
    }
  },
  methods: {
    change(e) {
      if (e.target.dataset.type !== 'hobby') return;
      const value = e.target.value;
      const checked = e.target.checked;
      const arr = [...this.value];
      if (checked) {
        arr.push(value);
      } else {
        const index = arr.indexOf(value);
        arr.splice(index, 1);
      }
      this.$emit('input', arr);
    }
  }
}
</script>